<template>
  <div class="record">
    <h3>服务记录</h3>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="large">
      <el-form-item label="服务状态">
        <el-select v-model="formInline.state" placeholder="请选择">
          <el-option label="待审核" value="daishenhe" />
          <el-option label="待服务" value="daifuwu" />
          <el-option label="已驳回" value="yibohui" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务机构">
        <el-select v-model="formInline.mechanism" placeholder="请选择">
          <el-option label="罗西社区服务中心" value="luoxi" />
          <el-option label="天明社区服务中心" value="tianming" />
          <el-option label="民进社区服务中心" value="minjin" />
        </el-select>
      </el-form-item>
      <el-form-item label="医生团队">
        <el-select v-model="formInline.doctor" placeholder="请选择">
          <el-option label="王皓团队" value="wanghao" />
          <el-option label="胡曼团队" value="human" />
          <el-option label="李维团队" value="liwei" />
        </el-select>
      </el-form-item>
      <el-form-item class="submit">
        <!-- <el-button type="primary" @click="onSubmit">新增服务</el-button> -->
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" plain >导出</el-button>
      </el-form-item>
      <el-form-item label="服务包">
        <el-select v-model="formInline.package" placeholder="请选择">
          <el-option label="0-6岁儿童服务包" value="ertong" />
          <el-option label="老年人服务包" value="laonian" />
          <el-option label="慢性病护理包" value="manxingbing" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务日期">
        <el-date-picker
          v-model="formInline.value2"
          type="daterange"
          unlink-panels
          range-separator="~"
          start-placeholder="请选择日期"
          end-placeholder="请选择日期"
          :shortcuts="shortcuts"
          :size="size"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formInline.input1"
          class="w-50 m-2"
          placeholder="请输入关键字"
          :suffix-icon="Search"
        />
      </el-form-item>
    </el-form>

    <el-table
      fit
      stripe
      :data="tableData"
      style="width: 100%; font-size: 12px"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="编号">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column property="name" label="姓名" />
      <el-table-column property="idCard" label="身份证号" />
      <el-table-column property="phone" label="手机号码" />
      <el-table-column property="servicePackage" label="服务包" />
      <el-table-column property="serviceItems" label="服务项目" />
      <el-table-column property="doctor" label="服务医生" />
      <el-table-column property="serviceStatus" label="服务状态" />
      <el-table-column property="time" label="申请时间" />
      <el-table-column label="操作">
        <template #default>
          <el-button type="primary" link size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import { getServiceUser } from '../../api/service'

  interface User {
    id: number,
    name: string,
    idCard: number,
    phone: number,
    servicePackage: string,
    serviceItems: string,
    doctor: string,
    serviceStatus: string,
    time: string
  }

  const currentPage4 = ref(4)
  const pageSize4 = ref(10)
  const small = ref(false)
  const disabled = ref(false)
  const background = ref(true)
  const size = ref<'' | 'large' | 'small'>('')
  const shortcuts = [
    {
      text: '上周',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: '上个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: '最近三月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]
  // 表单数据
  const formInline = reactive({
    state: '',
    mechanism: '',
    doctor: '',
    package: '',
    value2: '',//日期选择器
    input1: ''//搜索框
  })

  const tableData = ref<User[]>([])
  const total = ref('')
  const nextIndex = ref('')

  //发送请求
  async function fetchData () {
    const res = await getServiceUser()
    console.log('模拟数据', res)
    tableData.value = res.list
    total.value = res.total
    nextIndex.value = res.nextIndex
  }
  fetchData()

  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = async (val: number) => {
    console.log(`current page: ${val}`)
    const res = await getServiceUser((val - 1) * 10)
    tableData.value = res.list
    total.value = res.total
    nextIndex.value = res.nextIndex
  }
</script>

<style lang="less" scoped>
  .record{
    background: #fff;
    padding: 20px;
    h3{
      margin-bottom: 25px;
      line-height: 20px;
      border-left: 6px #4d4dff solid;
      font-size: 18px;
      font-weight: normal;
      padding-left: 10px;
    }
    :deep(.el-form-item){
      margin-right: 15px !important;
      .el-select{
        width: 200px;
      }
    }
  }

  :deep(.cell){
    display: flex;
    justify-content: center;
  }

  .el-pagination{
    justify-content: end;
  }
</style>
